<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 48 49"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><g data-follow-fill="currentColor" :fill="_fill"><path d="M18.666 15.575a10.175 10.175 0 0 0 4.917 8.887 9.587 9.587 0 0 0 9.834 0 10.164 10.164 0 0 0 4.917-8.746A9.984 9.984 0 0 0 28.467 5.46c-5.494.088-9.881 4.617-9.801 10.115Zm-.282 10.42V18.87a1.454 1.454 0 0 0-1.565-1.312H4.579a1.68 1.68 0 0 0-1.565 1.565v23.64h6.984c-1.842-7.796 2.438-13.05 8.386-16.768ZM7.74 21.664h6.286a.895.895 0 1 1 0 1.79H7.739a.895.895 0 1 1 0-1.79Zm-.895 3.942a.89.89 0 0 1 .262-.633.89.89 0 0 1 .633-.262h6.286a.895.895 0 1 1 0 1.79H7.739a.898.898 0 0 1-.895-.895Z"/><path d="m34.702 27.59-3.661 7.85-1.313-3.407a4.415 4.415 0 0 1 .783-1.842c.53-1.313.783-1.842-.53-2.625a2.476 2.476 0 0 0-1.922-.202 2.499 2.499 0 0 0-1.486 1.238c-.53 1.312.783 1.842.783 2.625a40.963 40.963 0 0 1-.783 4.19c-.332 1.383 0 1.036-1.312-1.565a60.746 60.746 0 0 1-2.597-6.596c-7.069 2.433-10.73 7.125-10.73 13.974 0 2.625 32.218 3.937 33-1.566.779-5.508-9.168-14.672-10.232-12.047v-.028Z"/></g></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Frame3Ad3f74p5 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
